<template>
	<view class="page-content">
		<view class="flex-col group_2">
			<view class="flex-row">
				<u-upload ref="fileref" :header="header" :action="action" @on-success="successPhoto" @on-remove="removePhoto"
					width="200" height="210" max-count="4"></u-upload>
			</view>
			<view class="flex-col group_4">
				<u-input placeholder="填写标题" v-model="formdata.title"></u-input>
				<view class="self-stretch divider mt-21"></view>
				<u-input placeholder="添加正文" type="textarea" height="500" v-model="formdata.content"></u-input>
			</view>
			<view class="flex-col group_5">
				<view class="flex-col self-stretch group_6 mt-15">
					<text class="self-start font">添加地点</text>
					<view class="flex-row mt-11" style="gap: 40rpx;">
						<view class="flex-row" v-for="(item,index) in location" :key="index">
							<view class="flex-row justify-start items-center button"><text class="font_2"
									style="margin-right: 20rpx;">{{item}}</text><u-icon name="close-circle-fill" color="#000000" size="36"
									@click="dellocation(index)"></u-icon></view>
						</view>
						<u-icon name="plus-circle-fill" color="#fcd610" size="48" @click="showModal=true"></u-icon>
					</view>
				</view>
			</view>
			<view class="flex-col justify-start items-center button_4 text-wrapper_3">
				<text class="font text_3" @tap="handleSubmit">发布动态</text>
			</view>
		</view>
		<u-modal v-model="showModal" confirm-color="#fcd610" @confirm="confirmaddress" :show-title="false">
			<view class="slot-content" style="padding: 32rpx;">
				<u-input placeholder="输入地点" v-model="formdata.location"></u-input>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import chongyouquan from '../../../api/chongyouquan.js';
	import utils from '../../../utils/util.js';
	const app = getApp();
	export default {
		data() {
			return {
				formdata: {
					city: '',
					title: '',
					content: '',
					location: '',
					publisher: '',
					publisherId: '',
					picture: '',
				},
				picture: [],
				location: [],
				index: -1,
				action: this.$config.mobeilURL + "/common/uploadFile",
				header: {
					"content-type": "multipart/form-data",
					Authorization: uni.getStorageSync("cxbtoken"),
				},
				showModal: false,
			};
		},
		onLoad() {
			this.formdata.city = app.globalData.city;
			const userinfo = uni.getStorageSync("userinfo")
			if (userinfo) {
				this.formdata.publisherId = userinfo.id;
				this.formdata.publisher = userinfo.nickName;
			}
			this.location.push(app.globalData.city);
		},
		methods: {
			successPhoto(data, index) {
				if (data.code !== 200) {
					this.$refs.fileref.lists[index].error = true;
				} else {
					this.picture.push(data.accessPath);
				}
			},
			removePhoto(index) {
				this.picture.splice(index, 1);
			},
			confirmaddress() {
				if (this.index >= 0) {
					this.location[this.index] = this.formdata.location;
				}
				this.location.push(this.formdata.location);
				this.formdata.location = '';
				this.index = -1;
			},
			dellocation(index) {
				this.location.splice(index, 1);
			},
			handleSubmit() {
				utils.checkSubscribe(['pB1aY9TUODceDIidIzYolVaLYqBFV8frysnw0A37uYc',
					'Gk9i22jP1-8fqFpFdISTl8WJNoTPzoxagqg4GIhWkR8',
					'Esotv-PqurO-AFJ93jFkcYEsyGuZ9b6puU5OEt3fzbM'
				]).then(res => {
					uni.showLoading({
						title: '发布中'
					})
					this.formdata.picture = this.picture.join(',');
					this.formdata.location = this.location.join(',');
					chongyouquan.addCYQuan(this.formdata).then(res => {
						if (res.code == 200) {
							uni.hideLoading();
							uni.showToast({
								title: '发布成功',
								icon: "none"
							})
							setTimeout(() => uni.navigateBack(), 1000);
						} else throw Error()
					}).catch(err => {
						uni.hideLoading();
						uni.showToast({
							title: '发布失败',
							icon: "none"
						})
					})
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
		padding: 0 32rpx;
		overflow-y: auto;

		.mt-11 {
			margin-top: 22rpx;
		}

		.mt-21 {
			margin-top: 42rpx;
		}

		.mt-15 {
			margin-top: 30rpx;
		}

		.group_2 {

			.group_3 {
				padding: 0 8rpx;

				.image_3 {
					border-radius: 16rpx;
					width: 240rpx;
					height: 238rpx;
				}

				.image-wrapper {
					padding: 100rpx 0;
					background-color: #f6f6f6;
					border-radius: 16rpx;
					width: 240rpx;
					height: 238rpx;

					.image_4 {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.group_4 {
				margin-top: 56rpx;

				.text {
					color: #999999;
					font-size: 40rpx;
					font-family: PingFang SC;
					line-height: 37rpx;
				}

				.divider {
					margin-right: 30rpx;
					background-color: #f3f3f3;
					height: 2rpx;
				}

				.text_2 {
					color: #999999;
					line-height: 29.76rpx;
					font-weight: unset;
				}
			}

			.group_5 {
				overflow-x: hidden;

				.section {
					margin-left: 712rpx;
					background-color: #d9d9d9;
					border-radius: 42rpx;
					overflow: hidden;
					width: 156rpx;
					height: 48rpx;
				}

				.group_6 {
					margin-right: 30rpx;
					padding-top: 32rpx;
					border-top: solid 2rpx #f3f3f3;

					.button {
						padding: 16rpx;
						background-color: #f3f3f3;
						border-radius: 42rpx;
						height: 48rpx;
					}


					.text-wrapper {
						padding: 16rpx 0;
						background-color: #f3f3f3;
						border-radius: 42rpx;
						overflow: hidden;
						width: 156rpx;
						height: 48rpx;
					}

					.font_2 {
						font-size: 28rpx;
						font-family: PingFang SC;
						line-height: 20rpx;
						color: #666666;
					}
				}
			}

			.font {
				font-size: 32rpx;
				font-family: PingFang SC;
				line-height: 29.8rpx;
				font-weight: 700;
				color: #000000;
			}

			.button_4 {
				margin-right: 42rpx;
				margin-top: 70rpx;

				.text_3 {
					line-height: 30.08rpx;
				}
			}

			.text-wrapper_3 {
				padding: 32rpx 0;
				background-color: #fbd610;
				border-radius: 98rpx;
			}
		}

		/deep/ .u-add-tips {
			display: none;
		}
	}
</style>